<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .ceshi{
        position: absolute;
        left:100px;
        top:100px;
        width: 100px;
        height: 100px;
        background: blue;
    }
    </style>
    <script>
    window.onload = function(){
        var ceshi = document.querySelector('#ceshi');
        var startX,startY,moveX,moveY,distanceX,distanceY;
        var isMove = false;
        ceshi.onmousedown = function(e){
            startX = e.clientX;
            startY = e.clientY;
            isMove = true;
        }
        ceshi.onmousemove = function (e) {
            if (isMove == false) {
                return;
            }
            moveX = e.clientX;
            moveY = e.clientY;
            distanceX = moveX - startX;
            distanceY = moveY - startY;
            ceshi.style.left = ceshi.offsetLeft + distanceX + 'px';
            ceshi.style.top = ceshi.offsetTop + distanceY + 'px';
            startX = moveX;
            startY = moveY;
        }
        ceshi.onmouseup = function () {
            isMove = false;
        }
    }
    </script>
</head>
<body>
    <div class="ceshi" id="ceshi"></div>
</body>
</html>